<template>
    <div class="vip" style="padding-bottom:40px;">
        <div class="bindForm">
            <div v-if="mode == 1">
                <el-input placeholder="填写用户名" v-model="form.phone"></el-input>
                <div v-if="showPhoneCode" style="margin-bottom: 12px;">
                    <el-input
                        type="password"
                        style="margin-top: 12px; margin-bottom: 12px;"
                        placeholder="填写密码"
                        v-model="form.pwd"
                    ></el-input>
                </div>
                <el-button type="primary" style="width: 100%; margin-top:30px;" @click="onLogin">登录</el-button>
            </div>
            <div v-if="mode == 2">
                <el-input placeholder="填写用户名" v-model="form.phone"></el-input>
                <el-input
                    style="margin-top: 12px;"
                    type="password"
                    placeholder="填写密码"
                    v-model="form.pwd"
                ></el-input>
                <div
                    class="flex justify-content-start align-items-center"
                    style="margin-top: 12px; "
                >
                    <div style="flex:1">
                        <el-input v-model="form.code" placeholder="填写验证码" width="180"></el-input>
                    </div>
                    <div style="flex:none;margin-left: 12px;">
                        <el-button type="primary" @click="getPhoneVerifyCode" :disabled="codeText != '获取验证码'">{{codeText}}</el-button>
                    </div>
                </div>
                <el-button type="primary" style="width: 100%;margin-top:30px;" @click="onFinish">完成</el-button>
            </div>
            <div class="hint" >
                登录即表示同意
                <a href="/protocol" target="_blank">《用户协议》</a>和
                <a href="/privacy" target="_blank">《隐私政策》</a>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getInfo,
  usernameLogin,
  verifyPhone,
  returnPwd,
  sendSms,
} from "@/api/login";

var countDownForm = 600;

export default {
  components: {},
  props: ["mode"],
  computed: {
    ...mapGetters(["openid", "sid"]),
  },
  data() {
    return {
      showPhoneCode: true,
      form: {
        phone: "",
        pwd: "",
        code: "",
      },
      codeCount: 60,
      codeText: "获取验证码",
      loginBtnDisable: false,
      codeInterval: null,
    };
  },
  created() {
    if (this.openid) {
      // this.url = 'http://baogao.applinzi.com/api/pay/WxMiniQrCode?openid=' + this.openid + "&id=" + this.idx
      // // console.log('url:'+this.url)
    }
  },
  methods: {
    // 获取验证码
    getPhoneVerifyCode() {
      if (this.codeText != "获取验证码") {
        return;
      }
      // 发送请求
      this.codeInterval = setInterval(() => {
        this.codeText = this.codeCount--;
        if (this.codeText == 0) {
          clearInterval(this.codeInterval);
          this.codeInterval = null;
          this.codeText = "获取验证码";
          this.codeCount = 60;
        }
      }, 1000);
      sendSms(this.form.phone).then((res) => {
        this.$message.info("验证码已发送, 有效时间5分钟");
      });
    },
    // 验证手机号是否存在
    verifyPhoneNo() {
      // 发送验证手机号
      // this.$message.info('手机号可用, 请继续注册');
      verifyPhone(this.form.phone)
        .then((response) => {
          this.showPhoneCode = true;
          this.loginBtnDisable = false;
        })
        .catch((err) => {
          this.showPhoneCode = false;
          this.loginBtnDisable = true;
        });
    },
    // 完成
    onFinish() {
      // 找回密码
      returnPwd(this.form.phone, this.form.pwd, this.form.code).then((res) => {
        // 处理
        this.$store.dispatch("Login", {
          token: res.infor.sid,
          sid: res.infor.sid,
          openid: res.infor.openid,
        });
        this.$emit("loginsucc", 1);
      });
    },
    // 绑定
    onLogin() {
      // 执行登录操作
      const { Base64 } = require("js-base64");
      var pass = Base64.encode(this.form.pwd);
      //  // console.log(pass)
      usernameLogin(this.form.phone, pass).then((res) => {
        this.$message.success("登录成功");
        // 处理 sid
        console.log(res)
        this.$store.dispatch("Login", {
          token: res.data.authToken,
          openid: res.data.openid,
          sid: res.data.sid
        });
        this.$emit("loginsucc", 1);
      });
    },
    changeMode() {
      this.$emit("changeMode", 2);
    },
  },
};
</script>

<style lang="less" scoped>
.vip {
    .bindForm {
        height: 100%;
        background: rgba(255, 255, 255, 1);
        // box-shadow: 0px 4px 8px 0px rgba(63, 71, 80, 0.1);
        // border-radius: 4px;
        // opacity: 0.9;
        box-sizing: border-box;
        padding: 40px 24px 0px 24px;
    }
}
.hint {
    width: 100%;
    text-align: center;
  font-size: 12px;
  margin-top: 20px;
}

.hint a {
  cursor: pointer;
  color: #4b91ea;
  text-decoration: none;
}
</style>

